<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import {pageBuildRecordApi} from '@/api/build-record'
import {BuildRecordQuery} from '@/api/build-record/models'
import {Delete, Edit, Search} from '@element-plus/icons-vue'

const tableData = ref([]) // 使用 ref 来存储动态数据
const totalQuantity = ref(0)//总条数
const currentPage = ref(1)//当前页
const pageSize = ref(10) // 设置默认的分页大小

// 加载数据的函数
function loadPage(params: BuildRecordQuery) {
  pageBuildRecordApi(params).then((response) => {
    const data = response.data.data
    currentPage.value = data.current
    totalQuantity.value = data.total
    tableData.value = data.records // 假设响应数据结构包含在 records 属性中
  })
}

// 初始化时加载数据
onMounted(() => {
  loadPage({current: currentPage.value, size: pageSize.value}) // 传递默认的分页参数
})

// 更新每页显示数据条数的处理函数
const handleSizeChange = (val: number) => {
  pageSize.value = val // 更新 pageSize
  currentPage.value = 1 // 重置为第一页
  loadPage({current: currentPage.value, size: pageSize.value}) // 重新加载数据
}

// 更新当前页的处理函数
const handleCurrentChange = (val: number) => {
  currentPage.value = val // 更新当前页
  loadPage({current: currentPage.value, size: pageSize.value}) // 重新加载数据
}
</script>
<template>
  <div style="height: 80vh">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="dataSourceName" label="数据源"/>
      <el-table-column prop="templateName" label="模板"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="updateTime" label="更新时间"/>
      <!--<el-table-column label="操作" width="150">-->
      <!--  <el-button :icon="Search" circle/>-->
      <!--  <el-button type="primary" :icon="Edit" circle/>-->
      <!--  <el-button type="danger" :icon="Delete" circle/>-->
      <!--</el-table-column>-->
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[1,2,4,10, 20, 40, 100, 200, 400, 1000]"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalQuantity"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style>
.demo-pagination-block {
  margin-top: 20px;
}
</style>
